<template>
  <div class="content">
    <!--
    <el-dialog title="更换头像?" :visible.sync="is_show" width="30%" :before-close="CloseCheck">

      <el-avatar shape="circle" :size="190" src = "../../assets/没有消息提示.png" @click.native="ChangeAvatar"></el-avatar>
      -->
      <!--
      <my-upload
          @crop-success="cropSuccess"
          @crop-upload-success="cropUploadSuccess"
          @crop-upload-fail="cropUploadFail"
          :modelValue.sync="show"
          v-model="show"
          :width="120"
          :height="120"
          img-format="png"
          langType="zh"
          field="Avatar1"
          url=""
      >

      </my-upload>
      <img class="avatar" :src="userphoto_url" alt="" style="margin-left:2em" @click="ChangeAvatar" id="avatar1">
      <br>
      <br>
      <div class="image" >
        选择图片
        <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg">
      </div>
      <el-row>

        <el-button style="margin-left:50%" type="warning" @click="ChangeImage">上传<i class="el-icon-upload el-icon--right"></i></el-button>
        -->
      <!--
        <el-button style="margin-left:80%" type="primary" @click="ConfirmUserPhoto">确定<i class="el-icon-upload el-icon--right"></i></el-button>
      </el-row>
      -->
      <!--
    </el-dialog>
    -->
    <my-upload
        @crop-success="cropSuccess"
        :modelValue.sync="show"
        v-show="is_show"
        :width="120"
        :height="120"
        img-format="png"
        langType="zh"
        :no-rotate="false"
        field="Avatar1"
        :noRotate='false'
    >
    </my-upload>
    <el-row>
      <el-tooltip content="上传头像" placement="right-start" >
        <img class="avatar" :src="userphoto_url" alt="" v-on:click="ChangeAvatar" id="avatar2">
      </el-tooltip>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>个人简介</span>
        </div>
        <div v-for="item in userinflist" :key="item.id">
          <el-row style="font-size: 15px">
            {{item.header}}
            {{item.content}}
            <el-button type="primary" icon="el-icon-edit" circle size="mini" class="edit-button" @click="ChangeInfById"></el-button>
          </el-row>
          <br>
        </div>
      </el-card>
    </el-row>
  </div>
</template>

<script>

import myUpload from 'vue-image-crop-upload';
export default {
  name: "personalmsg",
  components:{
    "my-upload": myUpload
  },
  data() {
    return{
      userid: "19373325",
      username: "",
      useremail: "",
      userphone: "",
      userphoto_url: require("../../assets/defaultHeader.png"),
      userphoto_temp: '',
      userinflist: [],
      is_show: false,
      image_show: false,
      show: true,
      cross: true,
    }
  },
  mounted() {
    this.GetUserInf();
    this.GetUserAvatar();
  },
  methods:{
    GetUserInf(){
      //接口 /personmsg/
      const self = this;
      self.axios({
        method: 'post',
        url: '/personmsg/',
        data: {
          user_id: this.$store.state.username,
        },
        headers: {'X-CSRFToken':
              this.getCookie('csrftoken')
        },
      }).then(res => {
        console.log(res.data);
        const obj = res.data;
        this.PutUserInfInList(obj);
      }).catch(err => {
        console.log("获取用户信息异常");
        this.$message("获取用户信息异常")
      })
    },
    GetUserAvatar(){
      const self = this;
      self.axios({
        method: 'post',
        url: '/get_avatar/',
        data: {
          user_id: this.$store.state.username,
        },
        headers: {'X-CSRFToken':
              this.getCookie('csrftoken')
        },
      }).then(res => {
        console.log(res.data);
        //如果用户没有设置头像(后端数据库为空)则为默认头像
        res.data.avatar_url === "" ? this.userphoto_url = require("../../assets/defaultHeader.png") : this.userphoto_url = res.data.avatar_url;
      }).catch(err => {
        console.log("获取用户头像异常");
        this.$message("获取用户头像异常")
      })
    },
    PutUserInfInList(obj){
      this.username = obj.username;
      this.useremail = obj.useremail;
      this.userphone = obj.userphone;
      this.userinflist.push({id: 1, header: "用户id:", content: this.userid});
      this.userinflist.push({id: 2, header: "用户名:", content: this.username});
      this.userinflist.push({id: 3, header: "绑定邮箱:", content: this.useremail});
      this.userinflist.push({id: 4, header: "绑定手机:", content: this.userphone});
    },
    getCookie(name) {
      var value = '; ' + document.cookie
      var parts = value.split('; ' + name + '=')
      if (parts.length === 2) return parts.pop().split(';').shift()
    },
    ChangeAvatar(){
      this.show = !this.show;
    },
    cropSuccess(data, field, key) {
      console.log('剪裁成功');
      console.log(data);
      console.log(field);
      this.userphoto_url = data;
      const self = this;
      self.axios({
        method: 'post',
        url: '/upload_avatar/',
        data: {
          user_id: this.$store.state.username,
          avatar_addr: data,
        },
        headers: {'X-CSRFToken':
              this.getCookie('csrftoken')
        },
      }).then(res => {
        console.log(res.data);
        console.log(res.data.code);
        this.GetUserAvatar();
      }).catch(err => {
        console.log("上传用户头像失败");
        this.$message("上传用户头像失败")
      })
    },
    ChangeInfById(){

    },
  }
}
</script>

<style scoped>
.content{
  width:38em;
  height:25em;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.user-photo{
  margin: 0 auto;
}
.box-card {
  margin-left:25%;
  margin-top:-20%;
  width: 27em;
  height: 15em;
  position: relative;
}
.edit-button {
  float:right;
}
.image{
  position: relative;
  margin-left:2.5em;
  padding: 4px;
  height: 20px;
  width: 100px;
  background: orange;
  border-radius: 6px;
  text-align: center;
  line-height: 20px;
  font-size: 15px;
  color: white;
}

.image input {
  position: absolute;
  top: 5px;
  right: -110px;
  /* color: #fff; */
  height: 30px;
  /* 重点代码让input隐藏 */
  opacity: 0;
}
.avatar{
  width:120px;
  height:120px;
  border-radius:50%;
}
</style>